<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" class="login-box">
      <h3>欢迎登录</h3>
      <el-form-item label="账号" prop="name">
        <el-input type="text" placeholder="请输入用户名" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
        <el-button type="primary" @click="resetForm('form')">重置</el-button>
        <el-button type="primary" @click="register">注册</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="注册页面" :visible.sync="dialogFormVisible" :before-close="handleClose" style="text-align: center;">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="form2">
        <el-form-item label="用户名" label-width="80">
          <el-input v-model="form2.username" auto-complete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80">
          <el-input v-model="form2.password" auto-complete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="再次确认密码" label-width="80">
          <el-input v-model="form2.passwordConfirm" auto-complete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="80">
          <el-input v-model="form2.phone" auto-complete="off" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel()">取消</el-button>
        <el-button type="primary" @click="decide(form2)">注册</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: 'Login',
    data() {
      return {
        form: {
          name: '',
          password: '',
        },
        form2: {
          username: '',
          password: '',
          passwordConfirm: '',
          phone: ''
        },
        rules: {
          name: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        },
        dialogFormVisible: false
      }
    },
    methods: {
      //登录
      submitForm(formName) {
        let that = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 验证成功
            // TODO 调试代码，后续去除
            sessionStorage.setItem('isLogin', 'true');
            this.$router.push({
              name: 'BusinessMain',
              params: {
                name: this.form.name
              }
            });

            axios({
              // 后端登录接口
              url:"/user/login",
              method:'post',
              data:{
                username:that.form.name,
                password:that.form.password
              }
            }).then(res=>{
              // 响应成功
              sessionStorage.setItem('isLogin', 'true');
              // TODO 登录成功之后需要保存验证信息，以便后续携带
              if(res.data.code == 10001){
                // 超级管理员
                this.$router.push({
                  name: 'AdminMain',
                });
              }else{
                // 商家小二登录
                sessionStorage.setItem('isLogin', 'true');
                this.$router.push({
                  name: 'BusinessMain',
                  params: {
                    name: this.form.name
                  }
                });
              }

              console.log("登陆成功"+res)
            },err=>{
              console.log("未响应....")
              // console.log(err)
            })

          } else {
            // 验证失败
            this.$message({
              message: '用户名或密码错误',
              type: 'warning'
            });
            return false;
          }
        });
      },
      //重置
      resetForm(form) {
        if (this.$route.name === 'EditSoftware') {
          this.fetchData();
        } else {
          this.$refs[form].resetFields();
        }
      },
      //登录页面中的注册
      register() {
        this.dialogFormVisible = true;
      },
      //取消
      cancel() {
        this.dialogFormVisible = false;
        this.form2.username='';
        this.form2.password='';
        this.form2.passwordConfirm='';
        this.form2.phone='';
      },
      // 注册页面关闭
      handleClose(){
        this.cancel();
      },
      //注册页面中的注册
      decide(form2) {
        //表单为空
        if (form2.username == '' && form2.password == '' && form2.passwordConfirm == '' && form2.phone == '') {
          alert('表单不能为空');
        }
        //密码不一样
        else if (form2.password != form2.passwordConfirm) {
          alert('两次密码不一致');
        }
        //长度
        else if (!(form2.password.length > 5 && form2.passwordConfirm.length > 5)) {
          alert('密码长度不小于6位');
        }
        else {
          // 注册
          axios({
            url:"/user/register",
            method:'post',
            data:{
              username:form2.username,
              password:form2.password,
              phone:form2.phone
            }
          }).then(res=>{
            // 响应成功
            alert('注册成功！');
          },err=>{})
          this.dialogFormVisible = false;
          this.form2.username='';
          this.form2.password='';
          this.form2.passwordConfirm='';
          this.form2.phone='';
        }

      }
    }
  }
</script>

<style scoped>
  .login-box {
    width: 350px;
    margin: 120px auto;
    border: 1px solid #DCDFE6;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 30px #DCDFE6;
    text-align: center;
  }
</style>
